<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>试卷预览</title>
    <link href="/static/resources/css/exampaper/main.css" rel="stylesheet" type="text/css"/>
    <link href="/static/resources/css/exampaper/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/resources/css/exampaper/test.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/static/resources/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/resources/css/laypage.css"/>
    <link rel="stylesheet" href="/static/resources/layui/css/layui.css"/>
    <script type="text/javascript" src="/static/resources/js/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/static/resources/laypage/laypage.js"></script>
    <script type="text/javascript" src="/static/resources/layui/layui.all.js"></script>
    <script type="text/javascript" src="/static/resources/vue/vue.js"></script>
    <script type="text/javascript" src="/static/resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/static/resources/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/static/resources/css/exampaper/jquery-1.11.3.min.js"></script>
    <script src="/static/resources/css/exampaper/jquery.easy-pie-chart.js"></script>
    <!--时间js-->
    <script src="/static/resources/css/exampaper/jquery.countdown.js"></script>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="main" id="app">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <div class="test_title">
                        <p class="test_time">
                            <b class="alt-1">${(examPaper.duration-examPaper.duration%60)/60}:${examPaper.duration%60}</b>
                        </p>
                        <font><input type="button" name="test_jiaojuan" value="试卷预览"></font>
                    </div>

                    <div v-if="${examPaper.questionCount} > 0">
                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i

                                        class="content_lit">${examPaper.questionCount!}</i><span>题，</span><span>合计</span><i
                                        class="content_fs">${examPaper.chooseQuestionTotalPoint!}</i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul>
                                <li v-for="(item,index) in questionResult" v-bind:id="'qu_0_'+index">
                                    <div class="test_content_nr_tt" >
                                        <i>{{index+1}}</i><font>{{item.name}}（ ）?</font>

                                    </div>
                                    <div class="test_content_nr_main">
                                        <ul>

                                            <li class="option">

                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_1'"
                                                />


                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_1'"  class="qqqq">
                                                    A.
                                                    <p class="ue" style="display: inline;">{{item.a}}</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_2'"
                                                />


                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_2'"   class="qqqq">
                                                    B.
                                                    <p class="ue" style="display: inline;">{{item.b}}</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_3'"
                                                />


                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_3'"   class="qqqq">
                                                    C.
                                                    <p class="ue" style="display: inline;">{{item.c}}</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_4'"
                                                />


                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_4'"   class="qqqq">
                                                    D.
                                                    <p class="ue" style="display: inline;">{{item.d}}</p>
                                                </label>
                                            </li>
                                            <hr/>
                                            <div>正确答案:&nbsp;&nbsp;&nbsp;{{item.answer}}</div>
                                            <hr/>
                                            <div>解析:&nbsp;&nbsp;&nbsp;{{item.analysis}}</div>
                                            <hr/>
                                            <div>来源:&nbsp;&nbsp;&nbsp;{{item.reference}}</div>
                                            <br/>
                                            <div> <button type="button" class="btn btn-info gotoFindQuestion" style="float: right"  v-bind:value="item.id">点击前往查看试题详情</button>
                                                <button type="button" class="btn btn-danger gotoRemoveQuestion" style="float: right"  v-bind:value="item.id" v-bind:questionType="item.questionType.id">点击从试卷移除该试题</button></div>
                                            <br/><br/><hr/>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>




                    <div v-if="${examPaper.judgmentQuestionCount} > 0">
                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">${examPaper.judgmentQuestionCount}</i><span>题，</span><span>合计</span><i class="content_fs">${examPaper.judgmentQuestionTotalPoint!}</i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul>

                                <li v-for="(item,index) in judgmentQuestionResult" v-bind:id="'qu_1_'+index" >
                                    <div class="test_content_nr_tt">
                                        <i>{{index+1}}</i><font>{{item.name}}()?</font>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>

                                            <li class="option">

                                                <input type="radio" class="radioOrCheck" v-bind:name="'judgmentAnswer'+(index+1)"
                                                       v-bind:id="'1_answer_'+(index+1)+'_option_1'"
                                                />

                                                <label v-bind:for="'1_answer_'+(index+1)+'_option_1'" class="qqqq">
                                                    正确.
                                                    <p class="ue" style="display: inline;">{{item.a}}</p>
                                                </label>
                                            </li>

                                            <li class="option">


                                                <input type="radio" class="radioOrCheck" v-bind:name="'judgmentAnswer'+(index+1)"
                                                       v-bind:id="'1_answer_'+(index+1)+'_option_2'"
                                                />

                                                <label v-bind:for="'1_answer_'+(index+1)+'_option_2'" class="qqqq">
                                                    错误.
                                                    <p class="ue" style="display: inline;">{{item.b}}</p>
                                                </label>
                                            </li>
                                            <hr/>
                                            <div>正确答案:&nbsp;&nbsp;&nbsp;{{item.answer}}</div>
                                            <hr/>
                                            <div>解析:&nbsp;&nbsp;&nbsp;{{item.analysis}}</div>
                                            <hr/>
                                            <div>来源:&nbsp;&nbsp;&nbsp;{{item.reference}}</div>
                                            <br/>
                                            <div>
                                                <button type="button" class="btn btn-info gotoFindQuestion" style="float: right"  v-bind:value="item.id">点击前往查看试题详情</button>
                                                <button type="button" class="btn btn-danger gotoRemoveQuestion" style="float: right"  v-bind:value="item.id" v-bind:questionType="item.questionType.id">点击从试卷移除该试题</button>
                                            </div>    <br/><br/><hr/>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>





                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                      答题卡
                        </h1>
                        <p class="test_time">
                       <b class="alt-1">${(examPaper.duration-examPaper.duration%60)/60}:${examPaper.duration%60}</b>
                        </p>
                    </div>

                    <div v-if="${examPaper.questionCount} >0">
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">${examPaper.questionCount!}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>

                                    <li v-for="(item,index) in questionResult"><a
                                            v-bind:href="'#qu_0_'+index">{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div v-if="${examPaper.judgmentQuestionCount} > 0">
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">${examPaper.judgmentQuestionCount}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>

                                    <li v-for="(item,index) in judgmentQuestionResult"><a v-bind:href="'#qu_1_'+index">{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>


<script>
    //vue使用
    var app = new Vue({
        el: "#app",
        data: {
            questionResult: [],
            judgmentQuestionResult:[]
        }
    });

    //点击修改试题弹出遮罩层 郭瀚钰
    $("#app").delegate(".gotoFindQuestion","click",function () {

        layer.open({
            type: 2,
            title: '试题详情',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: '/questionDetail?id='+$(this).attr("value"),
            end: function () {

            }
        });
    });
    //获取试题信息
    function getExamPaperQuestions() {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/ExamPage/getExamPaperAndItsQuestions',
            data: {
                examPaperId:${examPaper.id}
            },
            success: function (data) {
                console.log(data);
                app.questionResult = data.questionList;
                app.judgmentQuestionResult = data.judgmentQuestionList;
            },
            error: function () {
              //  alert("试题获取失败")
            }
        })
    }

    $(function () {
        getExamPaperQuestions();
    })

    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });


    $(function () {
        $('#app').delegate("li .qqqq","click",function() {
            debugger;
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if(!cardLi.hasClass('hasBeenAnswer')){
                cardLi.addClass('hasBeenAnswer');
            }
        });


        $("#app").delegate(".gotoRemoveQuestion","click",function (e) {
            var v = e.target;
            layer.confirm("(该试题将从本张试卷移除)确认移除?",{btn:["移除","取消"]},
                    function() {
                        $.ajax({
                            type: 'post',
                            url: '/ExamPage/removeQuestionFromExamPaper',
                            dateType: 'json',
                            data: {
                                examPaperId: ${examPaper.id},
                                questionId: $(v).attr("value"),
                                questionTypeId: $(v).attr("questionType")
                            },
                            success: function (data) {
                                if (data.flag) {
                                    //移除成功
                                    layer.msg('成功', {icon: 6});
                                    location.reload();
                                } else {
                                    layer.msg('试题维护中,移除失败', {icon: 3});
                                }
                            },
                            error: function () {
                              //  alert("执行失败")
                            }
                        })
                    },function () {

                    })
        });
    });





</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

